<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>浮动的图层</title>
    <script type="text/javascript">
      (function() {
        window.onload = function() {
          var closeBtn = document.getElementById("closeDiv");
//          先保存获取的结果
          closeBtn.onclick = function() {
            var adObj = document.getElementById("adDiv");
            adObj.style.display = "none";
          }
//          获取结果后使用匿名函数动态的来绑定方法
          setTimeout("hiddenDiv()", "1000");
//            递归调用后加定时器
        }
      })();
      var myTimeout;
//        定义结束的一个方法(未赋值)
      function hiddenDiv() {
        var step = 5;
//      step是用来充当递减的单位
                console.debug(typeof adDiv.style.height);
                console.debug(adDiv.offsetHeight);
        adDiv.style.height = adDiv.offsetHeight - step + "px";
        if(adDiv.offsetHeight < step) {
          clearTimeout(myTimeout);
          //        adDiv.style.display = "none";
          switchDiv(document.querySelector("input"));
        } else {
          myTimeout = setTimeout("hiddenDiv()", "50");

          //        setInterval()//这个方法会重复执行。settimeout只重复一次
        }
      }
      function switchDiv(btnObj) {
//              console.debug(adDiv.style.display);
        adDiv.style.height = "400px";
        adDiv.style.display == 'block' ? adDiv.style.display = "none" : adDiv.style.display = "block";
        btnObj.value == "隐藏图层" ? btnObj.value = "显示图层" : btnObj.value = "隐藏图层";
        if(adDiv.style.display == "block") {
          setTimeout("hiddenDiv()", "1000");
        }
      }
      function pauseDiv(btn) {
        console.debug(btn.value);
        if(btn.value == "暂停") {
          btn.value = "继续";
          clearTimeout(myTimeout);
        } else {
          btn.value = "暂停";
          setTimeout("hiddenDiv()", "1000");
        }
      }
    </script>
    <style type="text/css">
      div#adDiv {
        border: solid thin red;
        background-color: yellowgreen;
        position: fixed;
        left: 0px;
        top: 0px;
        overflow: hidden;
      }

      div#closeDiv {
        background-color: gray;
        width: 30px;
        height: 30px;
        font-family: "lucida console";
        font-size: 30px;
        text-align: center;
        line-height: 30px;
        float: right;
      }

      div#leftDiv, div#rightDiv {
        position: fixed;
        top: 400px;
        width: 100px;
        height: 200px;
        background-color: deeppink;
      }

      div#leftDiv {
        left: 300px;
      }

      div#rightDiv {
        left: 1000px;
      }
    </style>
  </head>
  <body>
    <h1>浮动的图层</h1>
    <input type="button" value="隐藏图层" onclick="switchDiv(this);" />
    <hr />
    <script type="text/javascript">
      for(var i = 0; i < 20; i++) {
        document.writeln("广告层前面的内容第" + i + "行~！");
        for(var j = 0; j < 5; j++) {
          document.writeln("这是我的文字内容" + j + "！");
        }
        document.writeln("<br />");
      }
    </script>
    <input type="button" value="暂停" onclick="pauseDiv(this);" /><br />
    <div id="adDiv" style="display: block;height: 400px;">
      <div id="closeDiv">×</div>
      <img src="img/JS中的数组.png" width="60%" />
    </div>
    <script type="text/javascript">
      for(var i = 0; i < 20; i++) {
        document.writeln("广告层后面的内容第" + i + "行~！");
        for(var j = 0; j < 5; j++) {
          document.writeln("这是我的文字内容" + j + "！");
        }
        document.writeln("<br />");
      }
    </script>
    <div id="leftDiv">对联的左边</div>
    <div id="rightDiv">对联的右边</div>
  </body>
</html>